<template>
  <h1>商品列表</h1>
  <hr />
    <el-table :data="goodsList" style="width: auto" height="100%">
    <el-table-column fixed prop="proid" label="商品编号" width="200" />
    <el-table-column label="图片" width="200">
      <template #default="scope">
        <img class="img" :src="scope.row.img1" />
      </template>
    </el-table-column>
    <el-table-column prop="proname" label="名称" width="220" />
    <el-table-column prop="brand" label="品牌" width="80" />
    <el-table-column prop="originprice" label="价格" width="80" />
    <el-table-column prop="discount" label="折扣" width="80" />
    <el-table-column prop="sales" label="销量" width="110" />
    <el-table-column prop="stock" label="库存" width="110" />
    <el-table-column prop="isseckill" label="是否秒杀" width="100">
      <template #default="scope">
        <el-switch :active-value="1" :inactive-value="0"
          style="--el-switch-on-color: #76b1e1"
          v-model="scope.row.isseckill"
          @change="changekill(scope.row.proid, scope.row.isseckill)"
        />
      </template>
    </el-table-column>
    <el-table-column prop="isrecommend" label="是否推荐" width="100">
      <template #default="scope">
        <el-switch :active-value="1" :inactive-value="0"
          style="--el-switch-on-color: #76b1e1"
          v-model="scope.row.isrecommend"
          @change="changeFlag(scope.row.proid, scope.row.isrecommend)"
        />
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页效果 -->
  <el-pagination
  style="margin:25px auto 25px;height:50px;width:auto"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      :page-sizes="state.pageSizes"
      @size-change="sizeChange"
      @current-change="CurrentChange"
    />
  
  
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus"; 
import { pro_list, pro_updateFlag } from "../../../utils/api";

// 定义页面所有数据
const state = ref({
  User: [],
  total: 0,
  pageSize: 10,
  currentPage: 1,
  pageSizes: [3, 5, 10, 20, 50, 100], //可选择的一页多少条
});
// 改变页面的最大显示数量
const sizeChange = (val:number) => {
  console.log("改变每页多少条，当前一页多少条数据", val);
  params.limitNum = val;
  state.value.currentPage = 1;
  getGoodsList()
};
// 商品数据
interface IGoods {
  proid: string;
  banners: [];
  category: string;
  brand: string;
  proname: string;
  originprice: number;
  sales: number;
  stock: number;
  desc: string;
  issale: number;
  isrecommend: number;
  discount: number;
  isseckill: number;
  img1: string;
  img2: string;
  img3: string;
  img4: string;
}
const goodsList = reactive<IGoods[]>([]);
// 分页数据
const params = reactive<{
  count: number;
  limitNum: number;
}>({
  count: state.value.currentPage,
  limitNum: state.value.pageSize,
});
// 当前页变动时候触发的事件
const CurrentChange = (value: number) => {
  state.value.currentPage=value
  params.count = value;
  getGoodsList();
};
// 获取商品数据
const getGoodsList = () => {
  pro_list(params).then((res) => {
    if (res.data.code === "200") {
      state.value.total = res.data.total;
      goodsList.length = 0;
      goodsList.push(...res.data.data);
    }
  });
};
// 修改商品的秒杀状态
const changekill=(id: string, flag: number)=>{
  console.log(flag);
 
  
  pro_updateFlag({
  proid: id,
      type: "isseckill",
      flag: flag,
}).then(res=>{
    if(res.data.code==200){
      if(flag===1){
    ElMessage({
        message: "已开启秒杀！",
        type: "success",
      })
      console.log('qqq')
  }else{
    ElMessage({
        message: "已关闭秒杀！",
        type: "success",
      })
  }
     
    }
  })
}
// 修改商品推荐的状态
const changeFlag = (id: string, flag: number) => {
  // 发送请求
  pro_updateFlag({
  proid: id,
      type: "isrecommend",
      flag: flag,
}).then(res=>{
    if(res.data.code==200){
      if(flag===1){
    ElMessage({
        message: "已开启推荐！",
        type: "success",
      })
      console.log('qqq')
  }else{
    ElMessage({
        message: "已关闭推荐！",
        type: "success",
      })
  }
    }
  })
};
getGoodsList();
// const orderlistPage=()=>{
  // state.value.User=goodsList.slice(
  //   (state.value.currentPage - 1) * state.value.pageSize,
  //   state.value.currentPage * state.value.pageSize,
  // );
  // state.value.total=goodsList.length;
// }

</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
</style>